<template>
  <div class="headbox" style="width: 1300px; height: 50px; position: relative; top: 0; margin: 0 auto;">
    <div class="head">
      <el-button style="position: absolute; top:10px; right: 10px;" type="primary" @click="router.push('/user_update')">用户信息</el-button>
      <el-button style="position: absolute; top:10px; right: 100px;" type="primary" @click="router.push('/history')">就诊历史</el-button>
    </div>
  </div>
  <div class="contentbox">
    <div class="bigbox">
      <div class="logo" style="margin:0 auto; width: 230px; margin-top: 60px;">
        <img src="../assets/logo.png" alt="" style="width: auto; height: auto; margin-left: 20px;">
      </div>
      <el-input style="position: absolute; top: 100px; left: 370px; width: 500px;" v-model="search_input" placeholder="请输入内容"></el-input>
      <el-button type="primary" style="position: absolute; top: 100px; left: 870px;" @click="search">搜索</el-button>
      <a href="/disease_search" class="search_class">
        <div class="title">查疾病</div>
        <div class="detail">权威疾病百科</div>
        <div class="icon"><img src="../assets/查疾病.png" alt="查疾病" style="width: 40px; height: 40px;"></div>
      </a>
      <a href="/hospital_choose" style="left: 550px" class="search_class">
        <div class="title">查医院</div>
        <div class="detail">国内医院信息查询</div>
        <div class="icon"><img src="../assets/查医院.png" alt="查医院" style="width: 40px; height: 40px;"></div>
      </a>
      <a href="/doctor_department" style="left: 750px" class="search_class">
        <div class="title">问医生</div>
        <div class="detail">三甲主治医生在线</div>
        <div class="icon"><img src="../assets/听诊器.png" alt="问医生" style="width: 40px; height: 40px;"></div>
      </a>
    </div>
    <div class="changediv" style="position: relative; top: 250px; left: 0; width: 1300px; height: 50px; margin: 0 auto; border: 1px solid #000;">
      <div tabindex="0" class="publichealth" @click="getPublicHealthList()">大众健康</div>
      <div tabindex="0" class="livingway" @click="getLivingWayList()">生活手册</div>
      <div class="publichealthlistbox">
        <el-button class="publichealthbuttonbox" v-for="(item, key) in the_list" :key="key" @click="getsecondlevel(item.id)">
          {{ item.name }}
        </el-button>
      </div>
      <div class="detaillistbox">
        <el-button class="detaillist" v-for="(item, key) in secondlist" :key="key">{{ item.name }}</el-button>
      </div>
    </div>
    <div class="departmentbox">
      <el-button class="departmentbuttonbox" v-for="(item, key) in departmentlist" :key="key" @click="getdoctorlist(item.id)">{{ item.name }}</el-button>
    </div>
    <div class="doctorbox">
      <a class="doctorlistbox" href="" v-for="(item, key) in doctorlist" 
        @click.prevent="router.push({ path: '/doctor_detail', query: {id: item.id }})" :key="key">
        <div class="doctorname">{{ item.name }}</div>
        <div class="doctorhospital">{{ item.hospital_name }}</div>
        <div class="doctordepartment">{{ item.department_name }}</div>
        <div class="doctorcategory">{{ item.category_display }}</div>
        <img :src="item.doctor_avatar" class="doctorimage" />
      </a>
    </div>
  </div>
</template>

<style scoped>
  html, body {
    background-color: #f0f0f0;
  }
  .head {
    position: relative;
    width: 1300px;
    height: 50px;
    padding: 0;
    margin: 0 auto;
  }
  .contentbox {
    width: 1300px;
    height: 700px; 
    margin: 0 auto;
    /* background-image: url(../assets/全能人.jpg);
    background-position: center center; */
  }
  .bigbox {
    position: relative;
    width: 1300px;
    transition: all;
  }
  .search_class {
    width: 170px;
    height: 85px;
    position:absolute;
    top: 200px;
    left: 350px;
    border: 1px solid black;
    border-radius: 5px;
  }
  .title {
    position: absolute; 
    top: 10px; left: 10px; 
    font-size: 20px; 
    font-weight: bold;
  }
  .detail {
    position: absolute; 
    top: 45px; left: 10px; 
    font-size: 10px; 
  }
  .icon {
    position: absolute; 
    top: 25px; right: 10px; 
  }
  .publichealth {
    position: absolute;
    top: 0;
    left: 0;
    width: 650px;
    height: 50px;
    /* background-color: aquamarine; */
    text-align: center;
    line-height: 45px;
    border-right: 1px solid #000;
  }
  .publichealth:hover {
    background-color: #3edae2;
    color: #fff;
  }
  .publichealth:focus {
    background-color: #3edae2;
    color: #fff;
  }
  .livingway {
    position: absolute;
    top: 0;
    left: 650px;
    width: 650px;
    height: 50px;
    /* background-color: wheat; */
    text-align: center;
    line-height: 45px;
  }
  .livingway:hover {
    background-color: #3edae2;
    color: #fff;
  }
  .livingway:focus {
    background-color: #3edae2;
    color: #fff;
  }
  .publichealthlistbox {
    position: absolute;
    top: 50px;
    left: 0;
    width: 1300px;
    height: 100px;
    /* background-color: #2e0ba2; */
    text-align: center;
    border: 1px solid #000;
  }
  .publichealthbuttonbox {
    margin-top: 30px;
    margin-left: 10px;
  }
  .publichealthbuttonbox:hover {
    background-color: #3edae2;
    color: #fff;
  }
  .publichealthbuttonbox:focus{
    background-color: #3edae2;
    color: #fff;
  }
  .detaillistbox {
    position: absolute;
    top: 150px;
    left: 0;
    width: 1300px;
    height: 100px;
    /* background-color: #0b6da2; */
    text-align: center;
    border: 1px solid #000;
    border-top: 0;
  }
  .detaillist {
    margin-top: 30px;
    margin-left: 10px;
  }
  .detaillist:hover {
    background-color: #0b6da2;
    color: #fff;
  }
  .departmentbox {
    position: relative;
    top: 450px;
    left: 0;
    width: 1300px;
    height: 70px;
    background-color: #0b6da2;
    text-align: center;
  }
  .departmentbuttonbox {
    width: 150px;
    height: 50px;
    margin-top: 10px;
    margin-left: 10px;
  }
  .doctorbox {
    position: relative;
    top: 450px;
    left: 0;
    width: 1300px;
    height: 320px;
    background-color: #4c829f;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;;
  }
  .doctorlistbox {
    position: relative;
    width: 250px;
    height: 300px;
    margin-left: 10px;
    margin-top: 10px;
    background-color: #fff;
    text-decoration: none;
  }
  .doctorname {
    position: absolute;
    top: 150px;
    left: 90px;
    font-size: 30px;
    font-weight: bold;
  }
  .doctorimage {
    position: absolute;
    top: 30px;
    left: 75px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
  }
  .doctordepartment {
    position: absolute;
    top: 190px;
    left: 100px;
    font-size: 20px;
  }
  .doctorhospital {
    position: absolute;
    top: 220px;
    left: 80px;
    font-size: 20px;
  }
  .doctorcategory {
    position: absolute;
    top: 250px;
    left: 80px;
    font-size: 20px;
  }

</style>

<script setup>
  import { ref, onMounted } from "vue"
  import axios from "axios"
  import { useRoute, useRouter } from "vue-router";

  const route = useRoute()
  const router = useRouter()

  let the_list = ref([])

  let secondlist = ref([])

  let departmentlist = ref([])

  let doctorlist = ref([])

  let search_input = ref("")

  const getPublicHealthList = () => {
    axios.get(`http://127.0.0.1:8000/article/firstlevel/?category=0`)
    .then(res=>{
      console.log(res)
      the_list.value = res.data
    })
    .catch(error=>{
      console.log(error)
    })
  }

  const getLivingWayList = () => {
    axios.get(`http://127.0.0.1:8000/article/firstlevel/?category=1`)
    .then(res=>{
      console.log(res)
      the_list.value = res.data
    })
  }

  const getsecondlevel = (id) => {
    axios.get(`http://127.0.0.1:8000/article/secondlevel/?first_level=${id}`)
    .then(res=>{
      console.log(res)
      secondlist.value = res.data
    })
    .catch(error=>{
      console.log(error)
    })
  }

  const getdepartmentlist = () => {
    axios.get(`http://127.0.0.1:8000/disease/department/`)
    .then(res=>{
      departmentlist.value = res.data
    })
    .catch(error=>{
      console.log(error)
    })
  }

  const getdoctorlist = (id) => {
    axios.get(`http://127.0.0.1:8000/doctor/doctorDepartmentList/?department=${id}`)
    .then(res=>{
      doctorlist.value = res.data
    })
  }

  const search = () => {
    router.push({path: "/search", query: {"search_input": search_input.value}})
  }

  onMounted(()=>{
    getdepartmentlist()
  })

</script>
